// todo ======================= 获取分数，展示列表 =======================
axios.get('/score/list').then(({ data: { code, data, message } }) => {
  // console.log(code, data, message)
  if (code !== 0) return alert(message)

  let htmlStr = ''
  for (const k in data) {
    htmlStr += `
      </tr>
        <th scope="row">${k}</th>
        <td>${data[k].name}</td>
        <td class="score" data-id="${k}" data-batch="1">${data[k].score[0]}</td>
        <td class="score" data-id="${k}" data-batch="2">${data[k].score[1]}</td>
        <td class="score" data-id="${k}" data-batch="3">${data[k].score[2]}</td>
        <td class="score" data-id="${k}" data-batch="4">${data[k].score[3]}</td>
        <td class="score" data-id="${k}" data-batch="5">${data[k].score[4]}</td>

      </tr>`
  }
  qs('tbody').innerHTML = htmlStr
})

// todo ======================= 可编辑的表格 =======================
qs('tbody').onclick = (e) => {
  if (e.target.classList.contains('score')) {
    // console.log(1)
    const td = e.target
    // if (td.querySelector('input')) return
    // 把 td 的内容 赋值给 text
    const text = td.innerHTML
    // 清空 td 的内容
    td.innerHTML = ''
    // 创建 input 标签
    const input = document.createElement('input')
    input.value = text
    // 把 input标签放到 td 里面
    td.appendChild(input)
    input.focus() // 获取焦点

    let falg = false // 设置开关
    // console.log(td)
    input.onkeyup = (ev) => {
      if (ev.key === 'Enter') {
        const score = input.value
        const stu_id = td.dataset.id
        const batch = td.dataset.batch
        //  判断
        if (isNaN(score) || score > 100 || score < 0) return alert('请输入0-100的数字')

        // 成立 发起请求

        axios.post('/score/entry', { stu_id, batch, score }).then(({ data: { code, message } }) => {
          // console.log(res)
          if (code !== 0) return alert(message)
          //成功 开关设置为true
          falg = true
          td.innerHTML = score
        })
      }
    }
    input.onblur = () => {
      if (!falg) td.innerHTML = text // 失去焦点的时候,没成功,设置回原先值
    }
  }
}
